<template>
  <div class="formAsseBox">
    <el-form
      ref="formAsse"
      status-icon
      :model="formValue"
      :label-width="formData.labelWidth"
      :label-position="formData.labelPosition"
    >
      <el-row :gutter="formData.gutter">
        <el-col :span="item.editType == 'transfer' || item.editType == 'rich_text'? 24:formData.span" v-for="(item,index) in formData.formList" :key="index" :xs="item.xs" :sm="item.sm" :md="item.md" :lg="item.lg" :xl="item.lg">
          <el-form-item  v-if="item.editType == 'text'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]">
           <el-input
              class="widthHundred"
              v-model.trim="formValue[item.prop]"
              :placeholder="'请输入'+item.label"
              :clearable="true"
              :disabled="item.disabled"
            />
          </el-form-item>
          <el-form-item  v-if="item.editType == 'number'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
          <el-input
            class="widthHundred"
            v-model.number.trim="formValue[item.prop]"
            :placeholder="'请输入'+item.label+',纯数字'"
            :clearable="true"
            :disabled="item.disabled"
          />
          </el-form-item>
          <el-form-item  v-if="item.editType == 'textarea'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
           <el-input
            class="widthHundred"
            v-model.trim="formValue[item.prop]"
            type="textarea"
            placeholder="请填写内容"
            :clearable="true"
            :show-word-limit="true"
            :autosize="{ minRows: 3, maxRows: 5 }"
            :maxlength="100"
            :disabled="item.disabled"
          />
          </el-form-item>
          <!-- 如果editType是'mulit_text' //更改editType,使之成为测点形式，input框失去焦点的时候弹出下一个input -->
          <!-- <template v-if="item.editType == 'mulit_text'" >
            <el-form-item 
              :rules="item.notNull?item.rules:[]"
              v-for="(item1,index1) in item.doPoints"
              :key="index1"
              :label="item.label+ (index1+1)"
              :prop="'formList.' + index+ '.doPoints.'+index1 + '.measuringName'"
            >
              <div class="input-flex">
                <el-input class="flex-box" v-model="formValue[item1.measuringName]" @blur.native.capture="addDoPoint(index1,item,item1)"></el-input>
                <el-button class="flex-right" v-if="index1 != 0" @click.prevent="removeDoPoint(item1,item)">删除</el-button>
              </div>
            </el-form-item>
          </template> -->
          <el-form-item v-if="item.editType == 'icon_select'" :label="item.label" :prop="item.prop" :rules="item.notNull?item.rules:[]" >
            <icon-select
              :ref="'icon-'+item.prop"
              v-model="formValue[item.prop]"
              placeholder="请选择图标"
              @handlesetIconName="handlesetIcon($event,item.prop)" />
          </el-form-item>
          <el-form-item v-if="item.editType == 'color_select'" :label="item.label" :prop="item.prop" :rules="item.notNull?item.rules:[]" >
            <el-color-picker
              v-model="formValue[item.prop]"
              :predefine="predefineColors">
            </el-color-picker>
          </el-form-item>
          <el-form-item  v-if="item.editType == 'select'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-select
              class="widthHundred"
              v-model="formValue[item.prop]"
              :clearable="true"
              :placeholder="'请选择'+item.label"
              :filterable="true"
              :disabled="item.disabled"
            >
              <el-option
                v-for="(item1,index1) in item.options"
                :key="index1"
                :label="item1.label"
                :value="item1.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item  v-if="item.editType == 'multi_select'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-select
              class="widthHundred"
              v-model="formValue[item.prop]"
              :multiple="true"
              :clearable="true"
              :placeholder="'请选择'+item.label"
              :filterable="true"
              :disabled="item.disabled"
            >
              <el-option
                v-for="item1 in item.options"
                :key="item1.id"
                :label="item1.label"
                :value="item1.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item  v-if="item.editType == 'time'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-time-picker
              class="widthHundred"
              v-model="formValue[item.prop]"
              :is-range="item.isRange"
              :placeholder="'请选择'+item.label"
              :start-placeholder="'请选择开始'+item.label"
              :end-placeholder="'请选择结束'+item.label"
              :editable="true"
              :clearable="true"
              :disabled="item.disabled"
            />
          </el-form-item>
          <el-form-item  v-if="item.editType == 'date'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules.map(item => {
              return  {
                required: item.required,
                message: item.message,
                trigger: item.trigger
              }
            }):[]" >
            <el-date-picker
              class="widthHundred"
              v-model="formValue[item.prop]"
              :type="item.isRange?'daterange':'date'"
              :placeholder="'请选择'+item.label"
              :start-placeholder="'请选择开始'+item.label"
              :end-placeholder="'请选择结束'+item.label"
              :editable="true"
              :clearable="true"
              :disabled="item.disabled"
            />
          </el-form-item>
          <el-form-item  v-if="item.editType == 'datetime'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules.map(item => {
              return  {
                required: item.required,
                message: item.message,
                trigger: item.trigger
              }
            }):[]" >
            <el-date-picker
              class="widthHundred"
              v-model="formValue[item.prop]"
              :type="item.isRange?'datetimerange':'datetime'"
              :placeholder="'请选择'+item.label"
              :start-placeholder="'请选择开始'+item.label"
              :end-placeholder="'请选择结束'+item.label"
              :editable="true"
              :clearable="true"
              :disabled="item.disabled"
            />
          </el-form-item>
          <el-form-item  v-if="item.editType == 'radio'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-radio-group v-model="formValue[item.prop]" >
              <el-radio v-for="(item1,index1) in item.options" :key="index1" :label="item1.value" >{{item1.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item  v-if="item.editType == 'checkbox'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-checkbox-group v-model="formValue[item.prop]" >
              <el-checkbox  v-for="(item1,index1) in item.options" :key="index1" :label="item1.value">{{item1.label}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item  v-if="item.editType == 'switch'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-switch
              class="widthHundred"
              v-model="formValue[item.prop]"
              active-text="开"
              inactive-text="关"
              active-color="#13ce66"
              inactive-color="#C0CCDA"
              :active-value="true"
              :inactive-value="false"
            >
            </el-switch>
          </el-form-item>
          <el-form-item  v-if="item.editType == 'image' || item.editType == 'file'"  :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <!-- <el-checkbox-group v-show="false" v-model="formValue[item.prop]"></el-checkbox-group> -->
            <el-upload
              @click="uploadClick"
              class="upload-demo"
              :ref="item.editType == 'image' ? 'image-'+item.prop : 'file-'+item.prop"
              :action="'/api/file/file/upload'"
              :list-type='item.listType'
              :headers="headers"
              :multiple="true"
              :file-list="formValue[item.prop]"
              :limit="item.limit"
              :on-exceed="(files,fileList)=>{handleExceed(files,fileList,item)}"
              :on-remove="(file,fileList)=>{handleOnRemove(file,fileList,item)}"
              :on-change="(file,fileList)=>{handleOnChange(file,fileList,item)}"
              :on-success="(response,file,fileList)=>{onImportTemplateSuccess(response,file,fileList,item)}"
              :on-error="(err,file,fileList)=>{onImportTemplateError(err,file,fileList,item)}"
              :before-remove="beforeRemove"
              :accept="item.editType == 'image' ? '.jpeg,.gif,.png,.jpg, .svg' : '.rar, .pdf, .PDF, .zip, .doc, .xls, .xlsx, .jpeg, .gif, .png, .jpg, .svg'"
              :auto-upload="true"
            >
              <i v-if="item.editType == 'image' && item.listType == 'picture-card'" class="el-icon-plus"></i>
              <el-button v-else slot="trigger" type="primary">{{item.editType == 'image' ? '上传图片' : '上传文件'}}</el-button>
              <div slot="tip" class="el-upload__tip">{{item.editType == 'image' ? '只能上传.jpeg,.gif,.png,.jpg格式的图片' : '只能上传.rar,.pdf,.PDF,.zip,.doc,.xls,.xlsx,.jpeg,.gif,.png,.jpg格式的文件'}}</div>
            </el-upload>
          </el-form-item>
          <el-form-item class="treeForm" v-if="item.editType == 'tree_select'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules.map(item => {
              return  {
                required: item.required,
                message: item.message,
                trigger: item.trigger
              }
            }):[]">
            <tree-select
              v-model="formValue[item.prop]"
              :options="item.options"
              :placeholder="'请选择'+item.label"
              :disable-branch-nodes="true"
              :searchable="true"
              />
              <!-- <treeselect-value :value="formValue[item.prop]" /> -->
          </el-form-item>
          <el-form-item class="formTransfer" v-if="item.editType == 'transfer'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-transfer
              filterable
              :titles="item.titles"
              v-model="formValue[item.prop]"
              :data="item.options"
              :render-content="renderFunc"
            >
            </el-transfer>
          </el-form-item>
          <el-form-item v-if="item.editType == 'cascade_select'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-cascader
              class="widthHundred"
              v-model="formValue[item.prop]"
              clearable
              filterable
              :options="item.options"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item v-if="item.editType == 'rate_score'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-rate
              v-model="formValue[item.prop]"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              show-text>
            </el-rate>
          </el-form-item>
          <el-form-item v-if="item.editType == 'rich_text'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <!-- <Tinymce :ref="'editor-' + item.prop" v-model="formValue[item.prop]" :height="item.height" /> -->
            <vue-ueditor-wrap
              :ref="'editor-' + item.prop"
              v-model="formValue[item.prop]"
              :config="item.myConfig"
              :height="item.height"
            />
          </el-form-item>
          <el-form-item class="tagItem" v-if="item.editType == 'tag_select'" :prop="item.prop" :label="item.label" :rules="item.notNull?item.rules:[]" >
            <el-tag
              size="samll"
              class="tagBox"
              v-for="(tag,index1) in formValue[item.prop]"
              :key="index1"
              closable
              :disable-transitions="false"
              @close="handleClose(tag,item.prop)">
              {{tag}}
            </el-tag>
            <el-input
              size="small"
              class="input-new-tag tagBox"
              :class="formValue[item.prop]&&formValue[item.prop].length>0?'':'tagBoxBtn'"
              v-show="formValue['tagVisible-'+item.prop]"
              v-model="formValue['tagValue-'+item.prop]"
              :ref="'tag-'+item.prop"
              @keyup.enter.native="handleInputConfirm(item.prop,formValue[item.prop])"
              @blur="handleInputConfirm(item.prop,formValue[item.prop])"
            >
            </el-input>
            <el-button v-show="!formValue['tagVisible-'+item.prop]" :class="formValue[item.prop]&&formValue[item.prop].length>0?'':'tagBoxBtn'" class="button-new-tag tagBox" size="small"  @click="showInput(item.prop)">+ New Tag</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 主子表 start -->
      <el-tabs v-if="mainSubTable && mainSubTable.length>0" v-model="activeName" type="card" class="tabsBox" @tab-click="handleClickTabs">
        <el-tab-pane v-for="(item,index) in mainSubTable" :key="index" :label="item.title" :name="item.name">
          <el-button v-if="item.addBtn" class="filter-item tabBtn" icon="el-icon-plus" plain @click="handAddNewRow(item.name)">新增一行</el-button>
          <el-button v-if="item.deleteBtn" class="filter-item tabBtn" icon="el-icon-minus" plain @click="handleDeleteBatchRow(item.name,index,item.delName)">批量删除</el-button>
          <el-table
            :data="formValue[item.name]"
            highlight-current-row
            :ref="'table-'+item.name"
            @selection-change="selectionChange($event,item.name)"
            border
            stripe
            style="width: 100%;"
            fit
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              v-for="(item1,index1) in item.insertList"
              :key="index1"
              :prop="item1.prop"
              :label="item1.label"
              header-align="center"
              align="center"
              :min-width="260"
            >
              <template slot-scope="scope">
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'text'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-input
                    v-model.trim="scope.row[item1.prop]"
                    :placeholder="'请输入'+item1.label"
                    :clearable="true"
                  />
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'number'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-input
                    v-model.number.trim="scope.row[item1.prop]"
                    placeholder="请输入数字"
                    :clearable="true"
                  />
                  <!-- v-model.number.trim="formValue[item.name][scope.$index][item1.prop]"-->
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'textarea'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-input
                    v-model.trim="scope.row[item1.prop]"
                    type="textarea"
                    :placeholder="'请填写'+item1.label"
                    :clearable="true"
                    show-word-limit
                    :autosize="{ minRows: 1, maxRows: 5 }"
                    :maxlength="100"
                  />
                </el-form-item>
                <el-form-item
                  label-width="0"
                  v-if="item1.editType == 'rate_score'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                >
                  <el-rate
                    v-model="scope.row[item1.prop]"
                    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    show-text>
                  </el-rate>
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  class="tagItem"
                  v-if="item1.editType == 'tag_select'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules"
                >
                  <el-tag
                    size="samll"
                    class="tagBox"
                    v-for="(tag,index2) in scope.row[item1.prop]"
                    :key="index2"
                    closable
                    :disable-transitions="false"
                    @close="handleCloseTag(tag,item.name,scope.$index,item1.prop)">
                    {{tag}}
                  </el-tag>
                  <el-input
                    size="small"
                    class="input-new-tag tagBox"
                    :class="scope.row[item1.prop]&&scope.row[item1.prop].length>0?'':'tagBoxBtn'"
                    v-show="formValue['tagVisible-'+item.name+'.'+scope.$index+'.'+item1.prop]"
                    v-model="formValue['tagValue-'+item.name+'.'+scope.$index+'.'+item1.prop]"
                    :ref="'tag-'+item.name+'.'+scope.$index+'.'+item1.prop"
                    @keyup.enter.native="handleInputConfirm(item.name+'.'+scope.$index+'.'+item1.prop,scope.row[item1.prop])"
                    @blur="handleInputConfirm(item.name+'.'+scope.$index+'.'+item1.prop,scope.row[item1.prop])"
                  >
                  </el-input>
                  <el-button v-show="!formValue['tagVisible-'+item.name+'.'+scope.$index+'.'+item1.prop]" :class="scope.row[item1.prop]&&scope.row[item1.prop].length>0?'':'tagBoxBtn'" class="button-new-tag tagBox" size="small"  @click="showInput(item.name+'.'+scope.$index+'.'+item1.prop)">+ New Tag</el-button>
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'icon_select'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules"
                >
                  <icon-select
                    :ref="'icon-9'+item.prop"
                    v-model="scope.row[item1.prop]"
                    placeholder="请选择图标"
                    @handlesetIconName="handlesetIconSub($event,scope.$index,item.name,item1)" />
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'color_select'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules"
                >
                  <el-color-picker
                    v-model="scope.row[item1.prop]"
                    :predefine="predefineColors">
                  </el-color-picker>
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'select' || item1.editType == 'multi_select'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-select
                    v-model="scope.row[item1.prop]"
                    :multiple="item1.editType == 'select' ? false : true"
                    :clearable="true"
                    :placeholder="'请选择'+item1.label"
                    :filterable="true"
                  >
                    <el-option
                      v-for="(item2,index2) in item1.options"
                      :key="index2"
                      :label="item2.label"
                      :value="item2.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'time'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-time-picker
                    v-model="scope.row[item1.prop]"
                    :is-range="item1.isRange"
                    :placeholder="'请选择'+item1.label"
                    :start-placeholder="'请选择开始'+item1.label"
								    :end-placeholder="'请选择结束'+item1.label"
                    :editable="true"
                    :clearable="true"
                  />
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'date'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.notNull?item1.rules.map(it => {
              return  {
                required: it.required,
                message: it.message,
                trigger: it.trigger
              }
            }):[]">
                  <el-date-picker
                    v-model="scope.row[item1.prop]"
                    :type="item1.isRange?'daterange':'date'"
                    :placeholder="'请选择'+item1.label"
                    :start-placeholder="'请选择开始'+item1.label"
								    :end-placeholder="'请选择结束'+item1.label"
                    :editable="true"
                    :clearable="true"
                  />
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'datetime'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.notNull?item1.rules.map(it => {
              return  {
                required: it.required,
                message: it.message,
                trigger: it.trigger
              }
            }):[]">
                  <el-date-picker
                    v-model="scope.row[item1.prop]"
                    :type="item1.isRange?'datetimerange':'datetime'"
                    :placeholder="'请选择'+item1.label"
                    :start-placeholder="'请选择开始'+item1.label"
								    :end-placeholder="'请选择结束'+item1.label"
                    :editable="true"
                    :clearable="true"
                  />
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14"
                  v-if="item1.editType == 'radio'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-radio-group v-model="scope.row[item1.prop]"  >
                    <el-radio v-for="(item2,index2) in item1.options" :key="index2" :label="item2.value">{{item2.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14"
                  v-if="item1.editType == 'checkbox'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-checkbox-group v-model="scope.row[item1.prop]" >
                    <el-checkbox  v-for="(item2,index2) in item1.options" :key="index2" :label="item2.value">{{item2.label}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'switch'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-switch
                    v-model="scope.row[item1.prop]"
                    active-color="#13ce66"
                    inactive-color="#C0CCDA"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item
                  class="treeFormTable"
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'tree_select'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <tree-select
                    v-model="scope.row[item1.prop]"
                    :clearable="true"
                    :multiple="false"
                    :options="item1.options"
                    :placeholder="'请选择'+item1.label"
                    :disable-branch-nodes="true"
                    :searchable="true"
                    />
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'image'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-upload
                    :action="'/api/file/file/upload'"
                    :headers="headers"
                    class="upload-demo"
                    :multiple="true"
                    :ref="item.name+'-'+scope.$index+'-'+item1.prop"
                    :file-list="scope.row[item1.prop]"
                    :limit="item1.limit"
                    :on-exceed="(files,fileList)=>{handleExceedSub(files,fileList,scope.$index,item.name,item1)}"
                    :on-remove="(file,fileList)=>{handleOnRemoveSub(file,fileList,scope.$index,item.name,item1)}"
                    :on-change="(file,fileList)=>{handleOnChangeSub(file,fileList,scope.$index,item.name,item1)}"
                    :on-success="(response,file,fileList)=>{onImportTemplateSuccessSub(response,file,fileList,scope.$index,item.name,item1)}"
                    :on-error="(err,file,fileList)=>{onImportTemplateErrorSub(err,file,fileList,scope.$index,item.name,item1)}"
                    :before-remove="beforeRemove"
                    :accept="'.jpeg,.gif,.png,.jpg, .svg'"
                    :auto-upload="true"
                  >
                    <!-- <el-button slot="trigger" type="primary">上传图片</el-button> -->
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item
                  label=" "
                  label-width="14px"
                  v-if="item1.editType == 'file'"
                  :prop="item.name+'.'+scope.$index+'.'+item1.prop"
                  :rules="item1.rules">
                  <el-upload
                    :action="'/api/file/file/upload'"
                    :headers="headers"
                    class="upload-demo"
                    :multiple="true"
                    :ref="item.name+'-'+scope.$index+'-'+item1.prop"
                    :file-list="scope.row[item1.prop]"
                    :limit="item1.limit"
                    :on-exceed="(files,fileList)=>{handleExceedSub(files,fileList,scope.$index,item.name,item1)}"
                    :on-remove="(file,fileList)=>{handleOnRemoveSub(file,fileList,scope.$index,item.name,item1)}"
                    :on-change="(file,fileList)=>{handleOnChangeSub(file,fileList,scope.$index,item.name,item1)}"
                    :on-success="(response,file,fileList)=>{onImportTemplateSuccessSub(response,file,fileList,scope.$index,item.name,item1)}"
                    :on-error="(err,file,fileList)=>{onImportTemplateErrorSub(err,file,fileList,scope.$index,item.name,item1)}"
                    :before-remove="beforeRemove"
                    :accept="'.rar, .pdf, .PDF, .zip, .doc, .xls, .xlsx, .jpeg, .gif, .png, .jpg, .svg'"
                    :auto-upload="true"
                  >
                    <el-button slot="trigger" type="primary">上传文件</el-button>
                  </el-upload>
                </el-form-item>
                <div v-if="!item1.editType">
                  <div v-if="item1.webFilter" class="rowMain">{{scope.row[item1.prop] | item1.webFilter(item1.webFilterArr,item1.webFilterProp)}}</div>
                  <!-- <div v-else class="rowMain">sfasd和面试经历福建省老地方领导是减肥啦计算机按法律的世界反垄断是开发建设的开发建设的开发是放大镜谁代领弗利萨给付对价暗室逢灯康师傅收款登记反馈的实际付款时间的方式等法律会计师</div> -->
                  <div v-else class="rowMain">{{scope.row[item1.prop]}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 主子表 end -->
    </el-form>
    <!-- footer -->
    <div class="footer">
      <el-button type="primary"  @click="submitForm()">确定</el-button>
      <el-button @click="cancelForm()">取消</el-button>
    </div>
  </div>
</template>
<script>
import TreeSelect from '@riophae/vue-treeselect'
import IconSelect from '@/components/IconSelect'
import Tinymce from '@/components/Tinymce'
import specialAttr from '@/utils/special-attr'
import { getAccessToken } from '@/utils/auth'
import formApi from './form'
import VueUeditorWrap from '@/components/VueUeditorWrap'


export default {
  name: "FormAssemblyName",
  components: {
    TreeSelect,
    IconSelect,
    Tinymce,
    VueUeditorWrap
  },
  props: {
    entryFrom: {
      type: String,
      default: null
    },
    formData: {
      type: Object,
      require: true,
      default() {
        return {
          labelWidth: null,
          labelPosition: null,
          gutter: null,
          span: null,
          xs: null,
          sm: null,
          md: null,
          lg: null,
          xl: null,
          subTable: {},
          formList: []
        };
      },
    },
    mainSubTable: {
      type: Array,
      default: ()=>[]
    }
  },
  data() {
    return {
      formValue: {},
      initTableData:{},
      fileList: [],
      checkTableSum: {},
      activeName: null,
      headers: {},
      dialogImageUrl: '',
      dialogVisible: false,
      arrayName: ['cascade_select','multi_select','checkbox','tag_select','file','image','transfer'],
      arrayNameImgOrFile: ['file','image'],
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    };
  },
  created() {
    const token = getAccessToken()
    this.headers =  {
      "Authorization": "Bearer "+token
      // "Content-Type": "multipart/form-data"
    }
  },
  mounted(){
    this.uploadClick()
  },
  watch: {
    'formData.subTable': {
      deep: true,
      immediate: true,
      handler: function (newValue,oldValue){
        if(newValue){
          setTimeout(()=>{

          },1500)
          this.mainSubTable.forEach(item=>{
          })
        }
      }
    },
    'formData': {
      deep: true,
      immediate: true,
      handler: function (newValue,oldValue) {
        console.log('formData',this.formData)
        this.activeName = this.mainSubTable.length > 0 ? this.mainSubTable[0].name : null;
        this.initCheckVal(this.entryFrom);
        this.$nextTick(()=>{
          this.$refs['formAsse'].clearValidate();
        })
      }
    },
  },
  methods: {
    uploadClick(){

    },
   //给表单中复选框的v-model值初始化
    initCheckVal(where){
      this.formValue = {};
      this.initTableData = {};
      this.checkTableSum = {};
      if(where == 'add'){
        this.formData.formList.forEach((item,index)=>{
          //新增初始化
          if(item.prop === 'parentId'){
            this.$set(this.formValue, item.prop, item.value);
          }
          if(item.isCustomValue){
            this.$set(this.formValue, item.prop, item.value);
          }
          if(item.editType == 'checkbox' || item.editType == 'multi_select' || item.editType == 'tag_select'){
            this.$set(this.formValue, item.prop, []);
          }
          if(item.editType == 'icon_select' && this.$refs['icon-'+item.prop]!=undefined){
            this.$refs['icon-'+item.prop][0].clearFn()
          }
          if(item.editType == 'rate_score'){
            this.$set(this.formValue,item.prop,null)
          }
          //清除富文本编辑器内容
          // if(item.editType == 'rich_text' && this.$refs['editor-'+item.prop]!=undefined){
          //   this.$refs['editor-'+item.prop][0].setContent("");
          // }
        })
        this.mainSubTable.forEach((item,index)=>{
          this.formValue[item.name] = [];
          this.initTableData[item.name] = {};
          this.checkTableSum[item.name] = [];
          item.insertList.forEach((item1,index1)=>{
            if(item1.editType == 'checkbox' || item1.editType == 'multi_select' || item1.editType == 'image' || item1.editType == 'file' || item1.editType == 'tag_select'){
              this.initTableData[item.name][item1.prop] = [];
            }else{
              this.initTableData[item.name][item1.prop] = null;
            }
          })
        })
      }else if(where == 'edit'){
        //编辑初始化
        this.formData.formList.forEach((item,index)=>{
          //字符串转数组需要的字段转化
          if(this.arrayName.includes(item.editType)){
            if(item.fieldSpecialType == specialAttr.fieldSpecialType.MTM_TYPE.code){
              this.$set(this.formValue, item.prop, item.value);
            }else{
              //图片和文件的返回值处理方式
              if(this.arrayNameImgOrFile.includes(item.editType)){
                const imageValue = item.value;
                const imageArray = [];
                this.getStrToArrayByCommaImage(imageValue).forEach(item1=>{
                  imageArray.push(JSON.parse(item1))
                })
                if(item.listType && item.listType == "picture-card"){
                  const arrayCard = []
                  this.getStrToArrayByCommaImage(imageValue).forEach(item1=>{
                    var imageArrayCard = JSON.parse(item1)
                    if(imageArrayCard.path){
                      var imageArrayCardFormat = imageArrayCard.path.substring(imageArrayCard.path.lastIndexOf("\.") + 1, imageArrayCard.path.length)
                      formApi.readerImage(imageArrayCard.path)
                      .then((res)=>{
                        const imageArrayCardUrl = 'data:image/'.concat(imageArrayCardFormat).concat(';base64,').concat(res.data)
                        arrayCard.push({ name: imageArrayCard.name, url: imageArrayCardUrl, path: imageArrayCard.path })
                      })
                    }
                  })
                  this.$set(this.formValue, item.prop, arrayCard);
                }else{

                  this.$set(this.formValue, item.prop, imageArray);
                  console.log(imageArray)
                }
              }else{
                this.$set(this.formValue, item.prop, this.getStrToArrayByComma(item.value));
              }
             
            }
            if(item.editType == "transfer"){
              this.$set(this.formValue, item.prop, this.getStrToArrayByComma(item.value).map(i => i * 1));
            }
          }else{
            this.$set(this.formValue, item.prop, item.value);
            if(item.editType == "rich_text" && this.$refs['editor-'+item.prop]){
              this.$nextTick(()=>{
                this.$refs['editor-'+item.prop].setContent(item.value);
              })
            }
          }
          if((item.editType == 'checkbox' && !item.value) || (item.editType == 'multi_select' && !item.value) || (item.editType == 'tag_select' && !item.value)){
            this.$set(this.formValue, item.prop, []);
          }
          if(item.editType == 'icon_select' && this.$refs['icon-'+item.prop]!=undefined){
            this.$refs['icon-'+item.prop][0].clearFn()
          }
        })
        //主子表中的v-model值初始化   主子表待处理（编辑——）
        setTimeout(()=>{
          this.mainSubTable.forEach((item,index)=>{
            this.initTableData[item.name] = {};
            this.checkTableSum[item.name] = [];
            this.formValue[item.delName] = [];
            // this.formValue[item.name] = JSON.parse(JSON.stringify(this.formData.subTable[item.name]));
            this.$set(this.formValue,item.name,JSON.parse(JSON.stringify(this.formData.subTable[item.name])))
            item.insertList.forEach((item1,index1)=>{
              //字符串转数组需要的字段转化(主子表中)
              if(this.arrayName.includes(item1.editType)){
                this.formValue[item.name].forEach((item3,index3)=>{
                  if(item1.fieldSpecialType == specialAttr.fieldSpecialType.MTM_TYPE.code){
                    this.$set(this.formValue[item.name][index3],item1.prop,this.formValue[item.name][index3][item1.prop])
                  }else{
                    //图片和文件的返回值处理方式(主子表中)
                    if(this.arrayNameImgOrFile.includes(item1.editType)){
                      const imageValue = this.formValue[item.name][index3][item1.prop];
                      const imageArray = [];
                      this.getStrToArrayByCommaImage(imageValue).forEach(item4=>{
                        imageArray.push(JSON.parse(item4))
                      })
                      this.$set(this.formValue[item.name][index3],item1.prop, imageArray);
                    }
                    this.$set(this.formValue[item.name][index3],item1.prop,this.getStrToArrayByComma(this.formValue[item.name][index3][item1.prop]))
                  }
                })
              }
              if(item1.editType == 'checkbox' || item1.editType == 'multi_select' || item1.editType == 'image' || item1.editType == 'file' || item1.editType == 'tag_select'){
                this.initTableData[item.name][item1.prop] = [];
              }else{
                this.initTableData[item.name][item1.prop] = null;
              }
            })
          })
        },1500)
        // })
      }
      console.log('formValue',this.formValue)
    },
    //穿梭框
    renderFunc(h,option){
      return <span title={option.label}>{option.label}</span>;
    },
    //级联选择器改变值的时候
    handleChange(value){
      console.log(value)
    },
    //tag标签关闭的时候
    handleClose(tag,prop){
      this.formValue[prop].splice(this.formValue[prop].indexOf(tag),1);
    },
    //主子表中tag标签关闭的时候
    handleCloseTag(tag,name,index,name1){
      this.formValue[name][index][name1].splice(this.formValue[name][index][name1].indexOf(tag),1);
    },
    //tag标签中点击按钮框的时候
    showInput(prop){
      this.$set(this.formValue,"tagVisible-"+prop,true)
      this.$nextTick(_ => {
        this.$refs["tag-"+prop][0].$refs.input.focus();
      })
    },
    //tag标签keyup,blur
    handleInputConfirm(prop,val){
      let inputValue = this.formValue["tagValue-"+prop];
      if(inputValue){
        //判断是否有重复标签
        if(val.includes(inputValue)){
          this.$message({
            showClose: true,
            message: "已有名为【"+inputValue+"】的标签",
            type: 'warning'
          });
        }else{
          val.push(inputValue);
        }
      }
      this.$set(this.formValue,"tagVisible-"+prop,false)
      this.$set(this.formValue,"tagValue-"+prop,'')
    },

    //图片上传成功
    onImportTemplateSuccess(response,file,fileList,item){
      console.log('response',response)
     
    },
    //图片上传失败
    onImportTemplateError(err,file,fileList,item){
      console.log('err',err)
      console.log('file',file)
      console.log('fileList',fileList)
      console.log('formValue',this.formValue(item.prop))
    },


    //删除文件
    handleOnRemove(file, fileList,item){
      // console.log('file',file)
      this.$set( this.formValue, item.prop, fileList)
    },
    //改变文件
    handleOnChange(file,fileList,item){
      if(file.status == 'ready'){
        const isLtM = file.size / 1024 / 1024 < 10;
        if (!isLtM) {
          fileList.pop()
          if(item.editType === 'file'){
            this.$message.error("文件大小不超过 10M")
          }
          if(item.editType === 'image'){
            this.$message.error("图片大小不超过 10M")
          }
          return false;
        } else {
          let num = 0,i=0;
          for( i=0;i<fileList.length;i++){
            if(fileList[i].name == file.name){
              num ++;
              if(num > 1){
                this.$message({
                  showClose: true,
                  message: item.editType=='image'?'已有名为“'+file.name+'”的图片，请选择其他图片':'已有名为“'+file.name+'”的文件，请选择其他文件',
                  type: 'warning'
                });
                fileList.pop()
                break;
              }
            }
          }
          this.$set( this.formValue, item.prop, fileList)
          console.log('formValue',this.formValue)
        
        }
      }
    },
    //移除文件时的提示
    beforeRemove(file, fileList){
        console.log(file)
      return this.$confirm(`确定移除 ${ file.name }吗？`)
      .then(()=>{
        this.deleteUpload(file);
      })
    },
    //删除文件接口方法
    deleteUpload(file){
      const path = file.response?file.response.data.path:file.path;
      formApi.deleteFileOrImage(path)
      .then((res)=>{
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
    },
    //超出限制个数时的提示
    handleExceed(files, fileList,item) {
      this.$message.warning(item.editType=='image'?`当前限制选择 ${item.limit} 个图片，本次选择了 ${files.length} 个图片，共选择了 ${files.length + fileList.length} 个图片`:`当前限制选择 ${item.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    //工程结构图移除
    handleOnRemoveCard(file, fileList) {
      this.$set( this.formValue, item.prop, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除文件(主子表)
    handleOnRemoveSub(file, fileList,index,name,item1){
      this.$set( this.formValue[name][index], item1.prop, fileList);
    },
    //改变文件(主子表)
    handleOnChangeSub(file,fileList,index,name,item1){
      if(file.status == 'ready'){
        const isLtM = file.size / 1024 / 1024 < 10;
        if (!isLtM) {
          if(item1.editType === 'file'){
            this.$message.error("文件大小不超过 10M")
          }
          if(item1.editType === 'image'){
            this.$message.error("图片大小不超过 10M")
          }
          fileList.pop()
          return false;
        } else{
            let num = 0,i=0;
            for( i=0;i<fileList.length;i++){
              if(fileList[i].name == file.name){
                num ++;
                if(num > 1){
                  this.$message({
                    showClose: true,
                    message: item1.editType=='image'?'已有名为“'+file.name+'”的图片，请选择其他图片':'已有名为“'+file.name+'”的文件，请选择其他文件',
                    type: 'warning'
                  });
                  fileList.pop()
                  break;
                }
              }
            }
            this.$set( this.formValue[name][index], item1.prop, fileList);
        }
      }
    },
    //超出限制个数时的提示：主子表
    handleExceedSub(files, fileList,index,name,item1) {
      this.$message.warning(item1.editType=='image'?`当前限制选择 ${item1.limit} 个图片，本次选择了 ${files.length} 个图片，共选择了 ${files.length + fileList.length} 个图片`:`当前限制选择 ${item1.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    //图片上传成功(主子表)
    onImportTemplateSuccessSub(response,file,fileList,index,name,item1){
      console.log('response',response)
     
    },
    //图片上传失败(主子表)
    onImportTemplateErrorSub(err,file,fileList,index,name,item1){
      console.log('err',err)
    },

    //点击tabs的选项卡
    handleClickTabs(){

    },
    //确定按钮
    submitForm(){
      this.$refs['formAsse'].validate((valid) => {
        if (valid) {
          const formValueCopy = JSON.parse(JSON.stringify(this.formValue));
          console.log('formValueCopy',formValueCopy)
          //主子表中需要把arrayName中的数组转字符串
          this.mainSubTable.forEach((item,index)=>{
            item.insertList.forEach((item1,index1)=>{
              if(this.arrayName.includes(item1.editType)){
                this.formValue[item.name].forEach((item3,index3)=>{
                  if(item1.fieldSpecialType != specialAttr.fieldSpecialType.MTM_TYPE.code){
                    if(this.arrayNameImgOrFile.includes(item1.editType)){
                      formValueCopy[item.name][index3][item1.prop] = [];
                      if(this.formValue[item.name][index3][item1.prop]){
                        this.formValue[item.name][index3][item1.prop].forEach(item4=>{
                          // formValueCopy[item.name][index3][item1.prop].push(item4.response.data.path)
                          formValueCopy[item.name][index3][item1.prop].push(JSON.stringify({
                            name: item4.name,
                            path: item4.response?item4.response.data.path:item4.path
                          }))
                        })
                      }
                      formValueCopy[item.name][index3][item1.prop] = this.getArrayToStrByCommaImage(formValueCopy[item.name][index3][item1.prop])
                    }else{
                      formValueCopy[item.name][index3][item1.prop] = this.getArrayToStrByComma(this.formValue[item.name][index3][item1.prop])
                    }
                    // formValueCopy[item.name][index3][item1.prop] = this.getArrayToStrByComma(this.formValue[item.name][index3][item1.prop])
                  }
                })
              }
            })
          })
          //form表单中（非主子表）需要把arrayName中的数组转字符串
          this.formData.formList.forEach(item=>{
            if(this.arrayName.includes(item.editType)){
              if(item.fieldSpecialType != specialAttr.fieldSpecialType.MTM_TYPE.code){
                if(this.arrayNameImgOrFile.includes(item.editType)){
                  formValueCopy[item.prop] = [];
                  if(this.formValue[item.prop]){
                    this.formValue[item.prop].forEach(item1=>{
                      // formValueCopy[item.prop].push(item1.response.data.path)
                      formValueCopy[item.prop].push(JSON.stringify({
                        name: item1.name,
                        path: item1.response?item1.response.data.path:item1.path
                      }))
                    })
                  }
                  formValueCopy[item.prop] = this.getArrayToStrByCommaImage(formValueCopy[item.prop])
                }else{
                  formValueCopy[item.prop] = this.getArrayToStrByComma(this.formValue[item.prop])
                }
                // formValueCopy[item.prop] = this.getArrayToStrByComma(this.formValue[item.prop])
              }
            }
          })
          // 循环key 判断是否有点的属性
          for (let key in formValueCopy) {
             if (key.indexOf('$') !== -1) {
              console.info('===key', key)
              let keyArr = key.split('$')
              if (!formValueCopy[keyArr[0]]) {
                formValueCopy[keyArr[0]] = {}
              }
              formValueCopy[keyArr[0]][keyArr[1]] = formValueCopy[key]
              delete formValueCopy[key]
             } 
          }
          console.log('formValue',this.formValue)
          this.$emit('makeSure',formValueCopy)
        } else {
          return false;
        }
      });
    },
    //取消按钮
    cancelForm(){
      this.initCheckVal('add');
      // this.formValue = {};
      this.$nextTick(()=>{
        this.$refs['formAsse'].clearValidate();
        this.$emit('cancel')
      })
    },
    //图标选择器的绑定值
    handlesetIcon(val,prop){
      this.$set(this.formValue,prop,val)
    },
    //主子表中图标选择器的绑定值
    handlesetIconSub(val,index,name,item1){
      this.$set( this.formValue[name][index], item1.prop, val);
    },
    //主子表中添加一行
    handAddNewRow(name){
      //加个时间戳为了防止数据一样导致复选框的选择出现不必要的bug
      const rows = JSON.parse(JSON.stringify(this.initTableData[name]))
      rows.timeNum = new Date().getTime()
      this.formValue[name].push(rows)
    },
    //主子表中批量删除
    handleDeleteBatchRow(name,int,delName){
      if (this.checkTableSum[name].length == 0) {
        this.$message({
          showClose: true,
          message: '请选择删除行',
          type: 'warning'
				});
        return;
      }
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(this.entryFrom == 'edit'){
          this.checkTableSum[name].forEach(item=>{
            if(item.id){
              this.formValue[delName].push(item.id)
            }
          })
        }
        for(let i = 0; i < this.formValue[name].length; i++){
          for(let j = 0; j < this.checkTableSum[name].length; j++){
            if(this.formValue[name][i].id && this.formValue[name][i].id == this.checkTableSum[name][j].id){
              this.formValue[name].splice(i,1);
            }
            if(this.formValue[name][i].timeNum && this.formValue[name][i].timeNum == this.checkTableSum[name][j].timeNum){
              this.formValue[name].splice(i,1);
            }
          }
        }
        this.$refs['table-'+name][0].clearSelection()
        this.checkTableSum[name] = [];
      }).catch(()=>{
        //this.$message({
          //type: 'info',
          //message: '已取消删除'
       // });
      })
    },
    //table中当选择项发生变化时会触发该事件
    selectionChange(val,name) {
      this.checkTableSum[name] = val;
    },
    //array转为元素以 ',' 分隔的字符串
    getArrayToStrByComma(ary) {
      if(ary != null && ary != undefined){
        let str = ''
        str = ary.join(',')
        return str
      }
    },
    //array转为元素以 ';' 分隔的字符串
    getArrayToStrByCommaImage(ary) {
      if(ary != null && ary != undefined){
        let str = ''
        str = ary.join(';')
        return str
      }
    },
    // 字符串转为数组以 ',' 为 数组分隔的元素
    getStrToArrayByComma(str) {
      if(str != null && str != '' && typeof(str) != "undefined") {
        let array = []
        array = str.split(',')
        return array
      }else{
        return []
      }
    },
    // 图片和上传，字符串转为数组以 ';' 为 数组分隔的元素
    getStrToArrayByCommaImage(str) {
      if(str != null && str != '' && typeof(str) != "undefined") {
        let array = []
        array = str.split(';')
        return array
      }else{
        return []
      }
    },

  },
};
</script>
<style lang="scss" scoped>
.formAsseBox {
  padding: 20px;
  .tagItem{
    margin-bottom: 8px;
    .el-form-item__error{
      padding-top: 5px;
    }
    .tagBox{
      margin-bottom: 10px;
      height: 30px;

    }
  }
  .tagBoxBtn{
    margin-left: 0;
  }
  .widthHundred{
    width: 100%;
  }
  .tabsBox{
    padding-bottom: 10px;
    padding-top: 10px;
    .el-form-item__content{
      margin-left: 0!important;
    }
    .tabBtn{
      margin-bottom: 10px;
    }
  }

  .footer{
    text-align: center;
    padding: 10px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 30px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.input-flex {
  display: flex;
  .flex-box {
    flex: 1;
    padding-right: 10px;
  }
  .flex-right {
    flex-basis: 50px;

  }
}
</style>
<style >
.formAsseBox .formTransfer .el-transfer-panel__item.el-checkbox .el-checkbox__label{
  overflow: initial !important;
}
.formAsseBox .tagItem .el-form-item__error{
  margin-top: -10px;
}
.formAsseBox .tagItem .el-input--small .el-input__inner{
  height: 30px;
  line-height: 30px;
}
.treeFormTable .vue-treeselect div, .vue-treeselect span{
  line-height: 26px;
}
.treeForm .vue-treeselect__control{
  height: 28px;
}
.treeFormTable .vue-treeselect__control{
  height: 26px;
}
.tabsBox .el-table .cell{
  overflow: unset;
}
.v-modal{
  /* z-index: 0 !important; */
}
.edui-combox .edui-combox-body{
  color: #0e0d0d;
}
</style>



